<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        淘宝网，淘我喜欢！
    </title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <!--标题小图标-->
    <base target="_blank">
    <!--基础标签的路径定义有利于定向访问 ,target设置为_blank是为了再新页面打开-->
    <style>

    </style>
</head>

<body>
    <!-- 4个划分点 ：内容，颜色块，间距，边框-->
    <!--头部信息-->
    <div id="headMessage" class="clearfix layer">
        <ul class="fl">
            <li><span>中国大陆</span>
                <span class="iconfont arrow">&#xe502;</span>
            </li>
            <li class="mr7">
                <a href="#" class="login mr7">亲，请登录</a>
                <a href="#">免费注册</a>
            </li>
            <li><a href="#">手机逛淘宝</a></li>
        </ul>
        <ul class="fr">
            <li><a href="#">我的淘宝</a>
                <span class="iconfont arrow">&#xe502;</span>
            </li>
            <li>
                <span class="iconfont c4 mr5">&#xe60a;</span>
                <a href="#">购物车</a>
                <strong>0</strong>
                <span class="iconfont arrow">&#xe502;</span>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont mr5 store">&#xe647;</span>
                    收藏夹</a>
                <span class="iconfont arrow">&#xe502;</span>
            </li>
            <li>
                <a href="#"></a>
            </li>
            <li class="line">|</li>
            <li>
                <a href="#">千牛卖家中心</a>
                <span class="iconfont arrow">&#xe502;</span>
            </li>
            <li>
                <a href="#">联系客服</a>
                <span class="iconfont arrow">&#xe502;</span>
            </li>
            <li>
                <span class="iconfont c4 mr5">&#xe5d1;</span>
                <a href="#">网站导航</a>
                <span class="iconfont arrow">&#xe502;</span>
            </li>
        </ul>
    </div>
    <!--头部广告-->
    <div id="headAd">
        <div class="layer clearfix">
            <a href="#" class="fl go"> <img src="images/go.png"></a>
            <ul class="fr">
                <li class="item1">
                   
                    <h3><a href="#">电视会场</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item2">
                    <a href="#" class="fr"><img src="images/2.jpg" alt=""></a>
                    <h3><a href="#">电视会场</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item3">
                    <a href="#" class="fr"><img src="images/2.jpg" alt=""></a>
                    <h3><a href="#">电视会场</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item4">
                    <a href="#" class="fr"><img src="images/2.jpg" alt=""></a>
                    <h3><a href="#">电视会场</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
                <li class="item5">
                    <a href="#" class="fr"><img src="images/2.jpg" alt=""></a>
                    <h3><a href="#">电视会场</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li>
            </ul>
        </div>
    </div>
    <!--头部搜索-->
    <div id="headSearch">
        <div class="clearfix layer">
            <h1 class="fl"><a href="#">淘宝网</a></h1>

            <div class="code fr">
                <span class="iconfont close">&#xe642;</span>
                <span class="c5">手机淘宝</span>
                <img src="images/code.png" alt="">
            </div>

            <div class="search">
                <ul class="searchTab clearfix">
                    <li class="active">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>

                <div class="searchContent clearfix">
                    <form action="#">
                        <div class="searchBox fl">
                            <input type="text">
                            <div class="placehoder">
                                <i class="iconfont">&#xe66a;</i>
                                <span>新款连衣裙 四件套 时尚女包 沙发</span>
                            </div>
                            <span class="iconfont imgearch">&#xe612;</span>
                        </div>
                        <div class="btn fl">
                            <button type="submit">搜索</button>
                        </div>
                    </form>
                </div>

                <div class="hotKey">
                    <a href="#" class="c5">新款连衣裙</a>
                    <a href="#">四件套</a>
                    <a href="#">潮流T恤</a>
                    <a href="#">时尚女鞋</a>
                    <a href="#">短裤</a>
                    <a href="#">半身裙</a>
                    <a href="#">男士外套</a>
                    <a href="#" class="c5">墙纸</a>
                    <a href="#">行车记录仪</a>
                    <a href="#">新款男鞋</a>
                    <a href="#" class="c5">耳机</a>
                    <a href="#">时尚女包</a>
                    <a href="#">沙发</a>
                </div>
            </div>
        </div>
    </div>
    <!--导航内容-->
    <div id="nav" class="layer clearfix">
        <h2 class="fl">主题市场</h2>
        <ul>
            <li class="size"><a href="#">天猫</a></li>
            <li class="size"><a href="#">聚划算</a></li>
            <li class="size"><a href="#">天猫超市</a></li>
            <li class="line">|</li>
            <li><a href="#">淘抢购</a></li>
            <li><a href="#">电器城</a></li>
            <li><a href="#">司法拍卖</a></li>
            <li><a href="#">淘宝心选</a></li>
            <li><a href="#">兴农扶贫</a></li>
            <li class="line">|</li>
            <li><a href="#">飞猪旅行</a></li>
            <li><a href="#">智能生活</a></li>
            <li><a href="#">苏宁易购</a></li>
        </ul>
    </div>
    <!--首页内容-->
    <div id="fistScreen" class="layer clearfix">
        <div class="firstLeft fl">
            <!--侧边导航-->
            <div class="sideNav fl">
                <ul>
                    <li>
                        <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">鞋靴 </a> / <a href="#">箱包</a> / <a href="#">配件</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">内衣</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">农资</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">工具</a> / <a href="#">宠物</a> / <a href="#">建材</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">百货</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">百货</a> / <a href="#">二手车</a> / <a href="#">保健</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                    <li>
                        <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
                            class="iconfont fr">&#xe606;</span>
                    </li>
                </ul>
            </div>
            <!--图片一容器-->
            <div class="img1Box fr">
                <div class="pic fl">
                    <div class="img"><img src="images/6.jpg" alt=""></div>
                    <button class="iconfont leftBtn">&#xe68b;</button>
                    <button class="iconfont rightBtn">&#xe606;</button>
                    <div class="circle">
                        <span class="active"></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
                <div class="ad fr">
                    <a href=""><img src="images/4.jpg" alt=""></a>
                </div>

            </div>
            <!--图片二容器-->
            <div class="img2Box fr">
                <div class="pic fl">
                    <div class="picTitle">
                        <div class="text clearfix">
                            <span class="fl bg">理想生活上天猫</span>
                            <span class="fr"><i>1</i>/6</span>
                        </div>
                        <div class="line"><span></span></div>
                    </div>
                    <div class="img">
                        <img src="images/7.jpg" alt="">
                        <img src="images/7.jpg" alt="">
                    </div>
                    <button class="iconfont leftBtn">&#xe68b;</button>
                    <button class="iconfont rightBtn">&#xe606;</button>
                </div>
                <div class="ad fr">
                    <p class="title">今日特卖</p>
                    <a href=""><img src="images/4.jpg" alt=""></a>
                </div>
            </div>
            <!--淘宝头条-->
            <div class="news fl">
                <div class="hd fl">
                    <h3>淘宝头条</h3>
                    <p>让你的生活更简单</p>
                </div>
                <div class="newList fr">
                    <div class="item">
                        <a href="#" class="fl img"><img src="images/hd.jpg" alt=""></a>
                        <h4><a herf="#">扦插花卉不生根？教你3分钟学“高压”</a></h4>
                        <p><a
                                href="#">喜欢养花的人越来越多，想必很多花友经常会去花店或者花卉市场买一些绿植盆栽养在家里，当然随着养花的经验越来越足，很多花友也会通过播种繁殖、扦插繁殖、分株繁殖和高压繁殖来获得大量花卉盆栽。</a>
                        </p>
                        <a href="#" class="more">更多></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="firstRight fr">
            <!--用户-->
            <div class="user">
                <a href="#" class="avatar"><img src="images/tgz.jpg" alt=""></a>
                <p class="username">hi!你好</p>
                <p class="members">
                    <a href="#" class="gold">领淘金币抵钱</a>
                    <a href="#" class="club">会员俱乐部</a>
                </p>
                <div class="btn">
                    <button class="login">登录</button>
                    <button class="register">注册</button>
                    <button class="shop">开店</button>
                </div>
            </div>
            <!--举报-->
            <a href="" class="tipOff">
                <span>网上有害信息举报专区</span>
                <i class="iconfont">&#xe615;</i>
            </a>
            <!--公告区-->
            <div class="notice ">
                <ul class="title">
                    <li class="active"><a href="#">公告</a></li>
                    <li><a href="#">规则</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">安全</a></li>
                    <li><a href="#">公益</a></li>
                </ul>
                <ul class="content clearfix">
                    <li class="item"><a href="# ">聚划算效应全面爆发啦！ 天天都是品牌双11</a></li>
                    <li><a href="#">400多位老板娘入淘</a></li>
                    <li><a href="#">江苏兴化大闸蟹第一捞</a></li>
                </ul>
            </div>
            <!--图标区域-->
            <table class="icon">
                <tr>
                    <td class="item1"><a href="#">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item2"> <a href="#">
                            <span></span>
                            <i>车险</i>
                        </a></td>
                    <td class="item3"> <a href="#">
                            <span></span>
                            <i>旅行</i>
                        </a></td>
                    <td class="item4"> <a href="#">
                            <span></span>
                            <i>游戏</i>
                        </a></td>
                </tr>
                <tr>
                    <td class="item5"><a href="#">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item6"> <a href="#">
                            <span></span>
                            <i>车险</i>
                        </a></td>
                    <td class="item7"> <a href="#">
                            <span></span>
                            <i>旅行</i>
                        </a></td>
                    <td class="item8"> <a href="#">
                            <span></span>
                            <i>游戏</i>
                        </a></td>
                </tr>
                <tr>
                    <td class="item9"><a href="#">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item2"> <a href="#">
                            <span></span>
                            <i>车险</i>
                        </a></td>
                    <td class="item3"> <a href="#">
                            <span></span>
                            <i>旅行</i>
                        </a></td>
                    <td class="item4"> <a href="#">
                            <span></span>
                            <i>游戏</i>
                        </a></td>
                </tr>
            </table>
            <!--阿里app-->
            <div class="app">
                <div class="title clearfix">
                    <h3 class="fl">阿里APP</h3>
                    <a href="#" class="fr">更多></a>
                </div>
                <ul class="appIcon">
                    <li>
                        <a href="#">
                            <image src="images/a.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/b.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/c.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/d.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/e.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/a.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/b.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/c.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/d.png"></image>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <image src="images/e.png"></image>
                        </a>
                    </li>
                </ul>
            </div>
            <!---->
        </div>
    </div>
    <!--右边的内容-->

    <!--有好货，爱逛街-->
    <div class="layer clearfix">
        <!--有好货-->
        <div class="goods fl">
            <div class="head clearfix">
                <h3 class="fl">
                    <img src="images/yhh.png" alt="有好货">
                    <span class="iconfont">&#xe501;</span>
                    <i>与品质生活不期而遇</i>
                </h3>
                <a href="#" class="change fr">换一换</a>
            </div>
            <ul class="list">
                <li>
                    <a href="#"><img src="images/7.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text">《破产姐妹》max最爱Tarte哑光口红笔</p>
                    <a href="#" class="conment">
                        <span class="iconfont">&#xe69e;</span><i>5960 人说好</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/7.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text">《破产姐妹》max最爱Tarte哑光口红笔</p>
                    <a href="#" class="conment">
                        <span class="iconfont">&#xe69e;</span><i>5960 人说好</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/7.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text">《破产姐妹》max最爱Tarte哑光口红笔</p>
                    <a href="#" class="conment">
                        <span class="iconfont">&#xe69e;</span><i>5960 人说好</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/7.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text">《破产姐妹》max最爱Tarte哑光口红笔</p>
                    <a href="#" class="conment">
                        <span class="iconfont">&#xe69e;</span><i>5960 人说好</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/7.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text">《破产姐妹》max最爱Tarte哑光口红笔</p>
                    <a href="#" class="conment">
                        <span class="iconfont">&#xe69e;</span><i>5960 人说好</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/7.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text">《破产姐妹》max最爱Tarte哑光口红笔</p>
                    <a href="#" class="conment">
                        <span class="iconfont">&#xe69e;</span><i>5960 人说好</i>
                    </a>
                </li>
            </ul>
        </div>
        <!--爱逛街-->
        <div class="goods fr shoping">

            <div class="head clearfix">
                <h3 class="fl">
                    <img src="images/yhh.png" alt="有好货">
                    <span class="iconfont">&#xe501;</span>
                    <i>献给聪明可爱的你</i>
                </h3>
                <a href="#" class="change fr">换一换</a>
            </div>
            <ul class="list">
                <li>
                    <a href="#"><img src="images/5.jpg" alt=""></a>
                    <p class="text"><span class="iconfont">&#xe647;</span> <a href="#">芭蕾舞女孩摆件 少女值满格的好物</a> </p>
                    <a href="#" class="conment">
                        <span class="iconfont"> <img src="images/tgz.png" alt=""></span>
                        <i>厉害的明大神</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/5.jpg" alt=""></a>
                    <p class="text"><span class="iconfont">&#xe647;</span> <a href="#">学院风女生一定要穿的鞋子就是它</a> </p>
                    <a href="#" class="conment">
                        <span class="iconfont"> <img src="images/tgz.png" alt=""></span>
                        <i>厉害的明大神</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/5.jpg" alt=""></a>
                    <p class="text"><span class="iconfont">&#xe647;</span> <a href="#">学院风女生一定要穿的鞋子就是它</a> </p>
                    <a href="#" class="conment">
                        <span class="iconfont"> <img src="images/tgz.png" alt=""></span>
                        <i>厉害的明大神</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/5.jpg" alt=""></a>
                    <p class="text"><span class="iconfont">&#xe647;</span> <a href="#">学院风女生一定要穿的鞋子就是它</a> </p>
                    <a href="#" class="conment">
                        <span class="iconfont"> <img src="images/tgz.png" alt=""></span>
                        <i>厉害的明大神</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/5.jpg" alt=""></a>
                    <p class="text"><span class="iconfont">&#xe647;</span> <a href="#">学院风女生一定要穿的鞋子就是它</a> </p>
                    <a href="#" class="conment">
                        <span class="iconfont"> <img src="images/tgz.png" alt=""></span>
                        <i>厉害的明大神</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/5.jpg" alt=""></a>
                    <p class="text"><span class="iconfont">&#xe647;</span> <a href="#">学院风女生一定要穿的鞋子就是它</a> </p>
                    <a href="#" class="conment">
                        <span class="iconfont"> <img src="images/tgz.png" alt=""></span>
                        <i>厉害的明大神</i>
                    </a>
                </li>
            </ul>


        </div>
        <!--右边导航-->
        <div id="tool">
            <span class="iconfont">&#xe605;</span>
            <div class="btn">
                <a href="#" class="active c4">爱逛<br>好货</a>
                <a href="#" class="c5">好店<br>直播</a>
                <a href="#" class="c6">品质<br>特色</a>
                <a href="#" class="c4">实惠<br>热卖</a>
                <a href="#" class="c7">猜你<br>喜欢</a>
                <a href="#" class="iconfont"> &#xe642;<br>反馈</a>
                <a href="#">暴恐<br>举报</a>
            </div>
        </div>
</body>

</html>